<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增或编辑用户</title>
    <link th:replace="template/sys_header :: header"/>


</head>
<body>
<form lay-filter="form1" class="layui-form margintop20 marginbottom10" action="">
    <input type="hidden" id="userId" name="userId" value=""/>
    <input type="hidden" id="orgId" name="orgId" value=""/>
    <div class="layui-row margintop15">
        <div class="layui-col-sm2 layui-row-label">
            <span class="x-red">*</span>用户姓名
        </div>
        <div class="layui-col-sm5">
            <input type="text" id="userName" name="userName" lay-verify="required" autocomplete="" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux" style="margin-left: 5px;">
            <span class="x-red">*</span>请输入用户真实姓名
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            <span class="x-red">*</span>所在组织
        </div>
        <div class="layui-col-sm5">
            <input type="text" id="orgName" autocomplete="" disabled="disabled" class="layui-input disabled">
            <div style="position: absolute;right: 0;z-index: 1;top: 0;">
                <button type="button" onclick="xadmin.open('选择组织','/sys/organization/selectOrg',600, 650)" class="layui-btn layui-btn-normal">选择组织</button>
            </div>
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            <span class="x-red">*</span>用户编号
        </div>
        <div class="layui-col-sm5">
            <input type="text" id="userCode" name="userCode" lay-verify="required"  autocomplete="" class="layui-input">
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            <span class="x-red">*</span>手机号码
        </div>
        <div class="layui-col-sm5">
            <input type="text" id="cellPhone" name="cellPhone" lay-verify="required"  autocomplete="" class="layui-input">
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            <span class="x-red">*</span>登录帐号
        </div>
        <div class="layui-col-sm5">
            <input type="text" id="userAccount" name="userAccount" lay-verify="required" autocomplete="" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-row margintop10">-->
        <!--<div class="layui-col-sm2 layui-row-label">-->
            <!--<span class="x-red">*</span>登录密码-->
        <!--</div>-->
        <!--<div class="layui-col-sm5">-->
            <!--<input type="password" id="userPwd" name="userPwd" lay-verify="required" autocomplete="" class="layui-input">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            性别
        </div>
        <div class="layui-col-sm5">
            <input type="radio" name="sex" value="false" title="男" checked>
            <input type="radio" name="sex" value="true" title="女">
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            状态
        </div>
        <div class="layui-col-sm5">
            <input type="radio" name="state" value="false" title="已启用" checked>
            <input type="radio" name="state" value="true" title="已禁用">
        </div>
        <div class="layui-form-mid layui-word-aux" style="margin-left: 5px;">
            <span class="x-red">*</span>被禁用后将无法登录
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            <span class="x-red">*</span>角色
        </div>
        <div class="layui-col-sm5">
            <!--多选select-->
            <select name="roleIds" id="roleIds" lay-verify="required" lay-search="" lay-filter="roleIds" xm-select="roleIds" xm-select-skin="normal">
                <option value="">请选择角色</option>
                <option th:each="role: ${roles}" th:text="${role.roleName}" th:value="${role.roleId}"></option>
                <!--<option value="1">layer</option>
                <option value="2">form</option>
                <option value="3">layim</option>-->
            </select>

        </div>
        <div class="layui-form-mid layui-word-aux" style="margin-left: 5px;">
            <span class="x-red">*</span>请给该用户选择一个角色
        </div>
    </div>
    <div class="layui-row margintop10">
        <div class="layui-col-sm2 layui-row-label">
            排序号
        </div>
        <div class="layui-col-sm5">
            <input type="text" id="orderNum" name="orderNum" lay-verify="number" autocomplete="" class="layui-input">
        </div>
    </div>

    <div class="layui-row margintop15">
        <div class="layui-col-sm2 layui-row-label">

        </div>
        <div class="layui-col-sm5" style="text-align: center">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="save"><i class="iconfont">&#xe747;</i>
                &nbsp;保存&nbsp;
            </button>
            &nbsp;&nbsp;
            <button class="layui-btn layui-btn-danger" onclick="closeWindow()"><i class="iconfont">&#xe747;</i>
                &nbsp;关闭&nbsp;
            </button>
        </div>
    </div>
</form>
<script type="text/javascript" th:replace="template/sys_header :: footer"></script>
<script type="text/javascript" th:inline="javascript">

    var table = layui.table, $ = layui.jquery, form = layui.form , formSelects = layui.formSelects;;
    var orgId = queryString("orgId");
    var orgName = decodeURIComponent(queryString("orgName"));
    var user = [[${user}]];//组织机构信息
    var userRoleIds = [[${userRoleIds}]];//用户拥有的角色Id集合
    var isEdit = false;//默认不是编辑模式
    console.log(user);
    getById("orgName").value = orgName;
    getById("orgId").value = orgId;
    if(user && user.userId){
        isEdit = true;//编辑
        form.val('form1', {
            "userId" : user.userId,
            "orgId": user.orgId,
            "userName": user.userName,
            "userCode": user.userCode,
            "cellPhone" : user.cellPhone,
            "userAccount": user.userAccount,
            // "userPwd": user.userPwd,
            "orderNum": user.orderNum
        });

        if (user.state) {
            $("input[name=state][value=true]").prop("checked", true);
            $("input[name=state][value=false]").prop("checked", false);
        } else {
            $("input[name=state][value=true]").prop("checked", false);
            $("input[name=state][value=false]").prop("checked", true);
        }
        if (user.sex) {
            // true -- 1 -- 女
            $("input[name=sex][value=true]").prop("checked", true);
            $("input[name=sex][value=false]").prop("checked", false);
        } else {
            $("input[name=sex][value=false]").prop("checked", true);
            $("input[name=sex][value=true]").prop("checked", false);
        }

        //编辑时反选用户已拥有的角色
        if(userRoleIds){
            //layui.formSelects.value('roleIds', ["639015815203028992","1"]);
            layui.formSelects.value('roleIds', userRoleIds);
        }
        form.render();
    }

    $(function () {
        //"1", "639015815203028992"
        form.on('submit(save)', function (data) {
            //console.log(layui.formSelects.value('roleIds', 'val'));
            console.log(data.field);
            //发异步，数据提交
            if(isEdit){
                edit(data.field);
            }else{
                add(data.field);
            }
            return false;
        });
    })

    //关闭当前frame
    function closeWindow() {
        xadmin.close();
    }

    function add(field) {
        new AjaxRequest({
            type: "POST",
            url: webroot + "sys/user/add",
            data: JSON.stringify(field),
            isShowLoader: true,
            success: function (res) {
                //console.log(res);
                if (res) {
                    if (res.resultCode == "0000") {
                        var orgId = res.resultObj;
                        layer.alert("保存成功", {icon: 1}, function () {
                            //xadmin.father_reload();//刷新父窗体
                            xadmin.getParentWindow().refreshlist();
                            xadmin.close();//关闭当前frame
                        });
                    } else {
                        layer.alert(res.resultMessage, {icon: 2})
                    }
                }
            }
        });
    }

    function edit(field) {
        new AjaxRequest({
            type: "POST",
            url: webroot + "sys/user/edit",
            data: JSON.stringify(field),
            isShowLoader: true,
            success: function (res) {
                //console.log(res);
                if (res) {
                    if (res.resultCode == "0000") {
                        layer.alert("保存成功", {icon: 1}, function () {
                            //xadmin.father_reload();//刷新父窗体
                            xadmin.getParentWindow().refreshlist();
                            xadmin.close();//关闭当前frame
                        });
                    } else {
                        layer.alert(res.resultMessage, {icon: 2})
                    }
                }
            }
        });
    }

    //子窗体选择组织机构后调用此方法
    function selectOrg(orgId , orgName) {
        getById("orgId").value = orgId;
        getById("orgName").value = orgName;
    }
</script>
</body>
</html>